<template>
	<view>
		<view v-if="isLoading" style="width: 100%;height: calc(100vh);position: absolute;z-index: 10000;">
			<image src="../../../static/icon/loading.png" style="width: 110rpx;height: 110rpx;" class="loading" mode="">
			</image>
		</view>
		<view @click="closeAny" v-if="isShow30||this.$store.state.Show3"
			style="width: 100%;height: calc(100vh);position: absolute;z-index: 998;"></view>
		<view class="TC" style="position: relative;z-index: 999;" v-if="isShow30">
			<view class="box" style="top: 194rpx;left: 10%;width: 80%;height: 960rpx;">

				<view class="box1">
					<view class="box1-a">
						<view style="color: rgb(164,133,237);font-size: 24px;">恭喜你合成成功</view>
						<view style="color: rgb(164,133,237);
						font-size: 24px;">获得勋章</view>
						<view style="color: rgb(164,133,237);
						font-size: 24px;     margin: 0px 0px 64rpx 0px;">{{xzTcdata.nft_name}}</view>

						<image style="width: 536rpx;
		height: 536rpx;
		margin-top: -68rpx;
		" :src="imgURL + xzTcdata.nft_picture" mode=""></image>

						<view class="btnA" style="    margin-top: 20rpx;">
							<button type="button" style="color: #FFFFFF; " @click="a_closeTC40()">确认</button>
						</view>
					</view>

				</view>
			</view>
		</view>


		<view class="TC" style="position: relative;z-index: 999;" v-if="this.$store.state.Show3">
			<view class="box" v-if="is_upgrade==1">

				<view class="box1">
					<view class="box1-a">
						<view v-if="istrue=='0000'" style="text-align: center;">
							<view>兑换成功</view>
							<view>获得Cool贝×20</view>
						</view>
						<view v-else style="text-align: center;">
							<view class="">
								兑换失败
							</view>
							<view>{{msg}}</view>
						</view>

						<image style="width: 536rpx;
    height: 536rpx;
		margin-top: -68rpx;
    " src="../../../static/icon/jp.png" mode=""></image>


						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC3()">确认</button>
						</view>
					</view>

				</view>
			</view>
			<view class="box" style="height: auto;" v-else>

				<view class="box1">
					<view class="box1-a">
						<view v-if="istrue=='0000'" style="text-align: center;">
							<view>兑换成功</view>
							<view style="line-height: 400rpx;">获得Cool贝×20</view>
						</view>
						<view v-else style="text-align: center;">
							<view class="">
								兑换失败
							</view>
							<view style="height: 400rpx;box-sizing: border-box;padding-top: 80rpx;">{{msg}}</view>
						</view>

						<!-- 		<image style="width: 536rpx;
			height: 536rpx;
			margin-top: -68rpx;
			" src="../../../static/icon/jp.png" mode=""></image> -->


						<view class="btnA">
							<button v-if="istrue=='0000'" type="button" style="color: #FFFFFF; " @click="a_closeTC3">确认</button>
							<button v-else type="button" style="color: #FFFFFF; " @click="b_closeTC3">确认</button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- <view :style=" 'filter: blur('+this.$store.state.mackNum2+'px);'"> -->
		<view class="mack-a" :style=" 'filter: blur('+this.$store.state.mackNum+'px);'">
			<view class="cbox">
				<view class="cb-a">
					<Back num="true" name="我 的"></Back>
					<view style="margin-top: 28rpx;">输入兑换码</view>
					<view>兑换Cool贝</view>
				</view>
				<view class="cb-b">
					<view class="c-a">

						<view style="display: flex;align-items: center;">
							<view class="">
								兑换码：
							</view>
							<!-- <input type="text" v-model="code" style="height: 92rpx;color: #FFFFFF;"> -->
							<input v-model="code" @input="iponeinput"
							onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"	
								style="color: #FFFFFF; position: relative;z-index: 999;" type="text"
								placeholder="输入兑换码" />
						</view>
					</view>

				</view>
				<view class="cb-c">
					<image src="../../../static/icon/icon5/8.png" mode=""></image>
				</view>
				<button class="btnA" @click="Dtrue()">确 认</button>
			</view>
			<!-- </view> -->


		</view>
		<!-- <TabBar></TabBar> -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import Back from '../../../components/BackPage.vue'
	// import TabBar from '@/components/TabBar.vue'
	import uniRequest from '@/until/uni-request.js'
	export default {
		computed: { //加载数据过程loading
			...mapState(["isLoading"])
		},
		components: {
			Back
			// TabBar
		},
		created() {
			this.generate()
		},
		data() {
			return {
				is_upgrade: 0,
				imgURL: 'http://113.31.109.223:8000/file/file/download?fileId=',
				isShow30: false,
				code: '',
				msg: '',
				istrue: '',
				idDH: false,
				xzTcdata: []
			}
		},
		onShow() {
			this.closeTC40()
		},
		onHide() {
			// this.closemackNum
		},
		methods: {
			a_closeTC40(){
				this.closeTC40()
				uni.navigateTo({
					url:'/pages/HomePage/PersonalCenter/PersonalCenter'
				})
				uni.setStorageSync('shuaxin', 0)
			},
			a_closeTC3(){
				this.closeTC3()
				uni.navigateTo({
					url:'/pages/HomePage/PersonalCenter/PersonalCenter'
				})
				uni.setStorageSync('shuaxin', 0)
			},
			b_closeTC3(){
				this.closeTC3()
			},
			iponeinput() {

				var aa = /\d{6,}/
				if (aa.test(this.code) || this.code.length >= 6) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '兑换码格式正确'
					// });
					this.idDH = true

				} else {
					uni.showToast({
						icon: 'none',
						title: '兑换码至少输入6位'
					});
					this.idDH = false
					return false
				}
			},
			closeAny() {
				this.closeTC40()
				this.closeTC3()
			},
			closeTC40() {
				this.isShow30 = false
				this.closeTCxun()
			},
			Dtrue() {
				this.is_upgrade = 0
				this.Dhuan()
			},
			generate() {
				uniRequest.post('baseexchangecode/baseexchangecode/genallcode', {
					"face_value": 10,
					"num": 200
				}).then((res) => {
					console.log(res);

				}).catch((err) => {
					console.log(err);
				});
			},
			Dhuan() {
				if (this.idDH) {
					uniRequest.post('baseexchangecode/baseexchangecode/doexchange', {
						"code": this.code.trim()
					}).then((res) => {
						console.log(res);
						this.msg = res.data.msg
						this.istrue = res.data.code
						this.xzTcdata = res.data.data
						if (res.data.code == "0000") {
							this.code = ''
							if (res.data.data.nft_name || res.data.data.nft_picture != '') {
								this.isShow30 = true
								this.openTCxun()
							}
							if (res.data.data.is_upgrade == 1) {
								this.is_upgrade = res.data.data.is_upgrade
							}
						}
						this.openTC3()

					}).catch((err) => {
						console.log(err);
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '兑换码至少输入6位'
					});
				}

			},
			...mapMutations(['closemackNum','openTC3', 'closeTC3', 'closeTCxun', 'openTCxun']),
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes tdtc{
		0% {
				transform: scale(0.8); 
				// transform: scale(0.8);  
				opacity: 0.5;  
			}
		// 50% {
		// 	transform: scale(1);  
		// 	// opacity: 0.5;  
		// }
		45%{
			transform: scale(1);
			opacity: 1; 
		}
			// 90% {
			// 	transform: scale(1);
			// 	opacity: 1; 
			// }
			100% {
				transform: scale(1);
				opacity: 1; 
			}
		}
		.TC {
			animation-name:tdtc;
			animation-duration:0.9s;
			transform-origin:350rpx 500rpx;
			animation-timing-function:cubic-bezier(0.01, 1.24, 0.08, 1.36);
			animation-iteration-count:1;
			animation-play-state: running;
		.toptext {
			position: absolute;
			// top: -8%;
			top: 100rpx;
			left: 35%;
			z-index: 999;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text-a {

				font-size: 46rpx;
			}

			.text-b {
				color: rgb(148, 113, 254);
				font-size: 32rpx;
			}
		}

		height: 100%;
		background-color: rgb(255, 255, 255);

		// background: linear-gradient(#7a52c0, #d7d7d7) no-repeat;
		.title {
			text-align: center;
			line-height: 100rpx;
			font-size: 60rpx;
			color: rgb(164, 133, 237);
		}

		.box {
			z-index: 99;
			background-color: #fff;

			.box1 {

				// margin-top: 20rpx;
				.box1-a {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// height: 300px;
					color: rgb(164, 133, 237);
					font-size: 44rpx;
					align-items: center;

					image {
						width: 552rpx;
						height: 319rpx;
					}
				}
			}

			.send {
				position: absolute;
				right: 52rpx;

				uni-button {
					border-radius: 100rpx;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
					width: 144rpx;
					background: rgb(121, 72, 234);
					font-size: 28rpx;
				}
			}

			.box2-a {
				width: 94%;
				height: 16px;
				background-color: #fffefe7d;
				box-shadow: 0px 5px 50px #9e9e9e3b;
				border-radius: 0rem 0rem 10px 10px;
				/* opacity: 0.4; */
				position: absolute;
				left: 3%;
				bottom: -16px;
				// /* z-index: -1;
			}

			.u-input--border[data-v-fdbb9fe6] {
				border-radius: 100rpx;
				height: 96rpx;
				box-sizing: border-box;
				padding-top: 8rpx !important;
				margin-left: 10rpx;
			}

			.username {
				font-size: 18px;
				display: flex;
				align-items: center;

				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
			}

			.password {
				font-size: 18px;
				display: flex;
				align-items: center;
				margin-top: 30px;

				image {
					width: 16px;
					margin-right: 4px;
					height: 16px;
				}
			}

			.sms {
				display: flex;
				justify-content: end;
				color: rgb(164, 133, 237);
				padding: 10% 0;
				padding-bottom: 12%;
				margin-right: 36rpx;
			}

			z-index: 99;
			background-color: #fff;
			box-sizing: border-box;
			padding: 48rpx;
			box-shadow: 0px 10rpx 100rpx #9e9e9e80;
			position: absolute;
			background: #fff;
			width: 72%;
			height: 824rpx;
			border-radius: 2%;
			top: 310rpx;
			left: 14%;

			.btnA {

				width: 77%;

				margin: 0px auto;
				// margin-top: 40%;

				uni-button {
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.btnB {
				width: 60%;

				uni-button {
					margin-top: 20rpx;
					border-radius: 32px;
					color: #7a52c0;
				}

				margin: 0px auto;
			}
		}
	}




	.cbox {
		.cb-a {
			font-size: 42rpx;
			color: #fff;
			height: 300rpx;
			width: 100%;
			text-align: center;
			background-image: url('@/static/icon/purback.png');
			background-position: 100%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.cb-b {
			height: 180rpx;
			width: 100%;
			background-color: #fff;
			box-shadow: 0px 2rpx 40rpx #9e9e9e80;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.c-a {
				.uni-input-placeholder {
					color: rgb(229, 229, 229);
				}

				justify-content: space-evenly;
				width: 600rpx;
				display: flex;
				background-image: url('@/static/icon/icon1221/03.png');
				background-position: 100%;
				background-size: 100%;
				background-repeat: no-repeat;
				color: rgb(164, 133, 234);
				font-size: 18px;
				align-items: center;

				// text-align: center;
				input {
					height: 90rpx;
					/* background: #000; */
					background: linear-gradient(to right, #A272FC, #DE62D2);
					border-radius: 8rpx;
					width: 240rpx;
					text-indent: 36rpx;
				}
			}
		}

		// .uni-input-placeholder
		.cb-c {
			display: flex;
			justify-content: center;

			image {
				width: 756rpx;
				height: 756rpx;
				margin-top: -98rpx;
			}
		}

		.btnA {
			margin-top: -100rpx;
			border-radius: 66rpx;
			background: linear-gradient(to right, #A272FC, #DE62D2);
			color: #fff;
			width: 408rpx;
		}
	}
</style>
